<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>时间转换工具</title>
        <!-- 引入Highlight.js库 -->
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/github.min.css">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
        <!-- 引入常见编程语言支持 -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/languages/javascript.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/languages/java.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/languages/python.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/languages/go.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/languages/php.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/languages/c.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/languages/ruby.min.js"></script>
        <style>
        /* 基础样式重置 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        /* CSS变量定义 */
        :root {
            --primary-color: #3498db;
            --primary-hover: #2980b9;
            --secondary-color: #95a5a6;
            --secondary-hover: #7f8c8d;
            --background-color: #f4f4f4;
            --card-background: #ffffff;
            --text-color: #333333;
            --border-color: #dddddd;
            --border-radius: 5px;
            --box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            --font-family: Arial, sans-serif;
            --monospace-font: 'Courier New', monospace;
            --gap: 20px;
        }
        
        body {
            font-family: var(--font-family);
            background-color: var(--background-color);
            color: var(--text-color);
            margin: 0;
            padding: 20px;
        }
        
        .container {
            max-width: 1000px;
            margin: 0 auto;
        }
        
        /* 头部样式 */
        header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 30px;
            padding-bottom: 15px;
            border-bottom: 1px solid #eee;
        }
        
        h1 {
            color: #2c3e50;
            font-size: 28px;
        }
        
        .back-btn {
            background-color: var(--primary-color);
            color: white;
            padding: 10px 20px;
            text-decoration: none;
            border-radius: var(--border-radius);
            transition: background-color 0.3s ease;
            font-size: 14px;
        }
        
        .back-btn:hover {
            background-color: var(--primary-hover);
        }
        
        /* 工具卡片样式 */
        .tool-section {
            background-color: var(--card-background);
            padding: 25px;
            border-radius: 8px;
            box-shadow: var(--box-shadow);
            margin-bottom: 25px;
        }
        
        /* 当前时间戳区域 */
        .current-timestamp {
            background-color: #f8f9fa;
            padding: 15px;
            border-radius: var(--border-radius);
            margin-bottom: 25px;
        }
        
        .current-timestamp h3 {
            font-size: 16px;
            color: #2c3e50;
            margin-bottom: 10px;
        }
        
        .timestamp-display {
            display: flex;
            gap: 20px;
            flex-wrap: wrap;
        }
        
        .timestamp-item {
            flex: 1;
            min-width: 200px;
        }
        
        .timestamp-label {
            font-size: 12px;
            color: #666;
            margin-bottom: 5px;
        }
        
        .timestamp-value {
            font-family: var(--monospace-font);
            font-size: 16px;
            background-color: white;
            padding: 8px 12px;
            border: 1px solid var(--border-color);
            border-radius: 3px;
            cursor: pointer;
            transition: all 0.2s ease;
        }
        
        .timestamp-value:hover {
            border-color: var(--primary-color);
            box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.1);
        }
        
        /* 转换区域 */
        .conversion-section {
            display: grid;
            grid-template-columns: 1fr auto 1fr;
            gap: 20px;
            align-items: start;
            align-content: start;
            margin-top: 0;
        }
        
        /* 确保输入和输出区域的对齐 */
        .input-group {
            display: flex;
            flex-direction: column;
            gap: 8px;
            min-height: 100%;
        }
        
        .input-group label {
            font-weight: bold;
            color: #2c3e50;
            margin: 0;
            padding: 0;
            font-size: 14px;
            height: 20px;
            display: flex;
            align-items: center;
        }
        
        .input-group input {
            padding: 10px 12px;
            border: 1px solid var(--border-color);
            border-radius: var(--border-radius);
            font-size: 14px;
            width: 100%;
            margin: 0;
            height: 40px;
        }
        
        .input-group textarea {
            padding: 10px 12px;
            border: 1px solid var(--border-color);
            border-radius: var(--border-radius);
            font-size: 14px;
            font-family: var(--monospace-font);
            resize: vertical;
            min-height: 100px;
            width: 100%;
            margin: 0;
            height: 100px;
        }
        
        /* 调整转换按钮的对齐 */
        .convert-btn {
            align-self: flex-start;
            margin-top: 28px;
        }
        
        /* 调整提示信息的位置 */
        .tip {
            margin-top: 8px;
            margin-bottom: 0;
        }
        
        /* 当前时间戳区域样式 */
        .current-timestamp {
            background-color: transparent;
            padding: 0;
            border-radius: 0;
            margin-bottom: 25px;
        }
        
        .current-timestamp h3 {
            font-size: 14px;
            font-weight: bold;
            color: #2c3e50;
            margin-bottom: 15px;
            padding: 0;
            height: 20px;
            display: flex;
            align-items: center;
        }
        
        /* 统一输入组标签样式 */
        .input-group label {
            font-size: 14px;
            font-weight: bold;
            color: #2c3e50;
            margin: 0;
            padding: 0;
            height: 20px;
            display: flex;
            align-items: center;
        }
        
        /* 统一输入组样式 */
        .input-group {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }
        
        /* 确保两个区域的容器对齐 */
        .tool-section {
            display: flex;
            flex-direction: column;
            gap: 25px;
        }
        
        .timestamp-display {
            background-color: #f8f9fa;
            padding: 15px;
            border-radius: var(--border-radius);
            display: flex;
            gap: 20px;
            flex-wrap: wrap;
            align-items: start;
        }
        
        .timestamp-item {
            flex: 1;
            min-width: 200px;
            display: flex;
            flex-direction: column;
            gap: 8px;
        }
        
        .timestamp-label {
            font-size: 12px;
            color: #666;
            margin: 0;
            padding: 0;
        }
        
        .timestamp-value {
            font-family: var(--monospace-font);
            font-size: 16px;
            background-color: white;
            padding: 8px 12px;
            border: 1px solid var(--border-color);
            border-radius: 3px;
            cursor: pointer;
            transition: all 0.2s ease;
            margin: 0;
        }
        
        @media (max-width: 768px) {
            .conversion-section {
                grid-template-columns: 1fr;
                gap: 15px;
            }
        }
        
        .input-group {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }
        
        .input-group label {
            font-weight: bold;
            color: #2c3e50;
        }
        
        .input-group input {
            padding: 10px 12px;
            border: 1px solid var(--border-color);
            border-radius: var(--border-radius);
            font-size: 14px;
            width: 100%;
        }
        
        .input-group input:focus {
            outline: none;
            border-color: var(--primary-color);
            box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.1);
        }
        
        .input-group textarea {
            padding: 10px 12px;
            border: 1px solid var(--border-color);
            border-radius: var(--border-radius);
            font-size: 14px;
            font-family: var(--monospace-font);
            resize: vertical;
            min-height: 100px;
            width: 100%;
        }
        
        .input-group textarea:focus {
            outline: none;
            border-color: var(--primary-color);
            box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.1);
        }
        
        .convert-btn {
            align-self: center;
            background-color: var(--primary-color);
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: var(--border-radius);
            cursor: pointer;
            font-size: 14px;
            transition: all 0.3s ease;
            min-width: 120px;
        }
        
        .convert-btn:hover {
            background-color: var(--primary-hover);
            transform: translateY(-2px);
        }
        
        /* 操作按钮区域 */
        .action-buttons {
            display: flex;
            gap: 10px;
            margin-top: 20px;
            flex-wrap: wrap;
        }
        
        .action-btn {
            background-color: var(--secondary-color);
            color: white;
            border: none;
            padding: 8px 16px;
            border-radius: var(--border-radius);
            cursor: pointer;
            font-size: 13px;
            transition: background-color 0.3s ease;
        }
        
        .action-btn:hover {
            background-color: var(--secondary-hover);
        }
        
        /* 代码示例区域 */
        .code-examples {
            margin-top: 40px;
        }
        
        .code-examples h2 {
            font-size: 20px;
            color: #2c3e50;
            margin-bottom: 20px;
        }
        
        .code-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
            gap: 20px;
            max-width: 100%;
        }
        
        .code-item {
            background-color: var(--card-background);
            border: 1px solid var(--border-color);
            border-radius: 8px;
            padding: 12px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
            transition: all 0.3s ease;
            overflow: hidden;
        }
        
        .code-item:hover {
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
            transform: translateY(-2px);
        }
        
        .code-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 8px;
            padding-bottom: 6px;
            border-bottom: 1px solid #f0f0f0;
        }
        
        .code-language {
            font-size: 13px;
            font-weight: 600;
            color: var(--primary-color);
            text-transform: capitalize;
        }
        
        .copy-btn {
            background-color: transparent;
            color: var(--secondary-color);
            border: 1px solid var(--border-color);
            padding: 3px 8px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 11px;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            gap: 3px;
        }
        
        .copy-btn:hover {
            background-color: var(--primary-color);
            color: white;
            border-color: var(--primary-color);
            transform: translateY(-1px);
        }
        
        .copy-btn.copied {
            background-color: #2ecc71;
            color: white;
            border-color: #2ecc71;
        }
        
        .code-content {
            font-family: var(--monospace-font);
            font-size: 12px;
            line-height: 1.4;
            background-color: #fafafa;
            padding: 8px;
            border-radius: 6px;
            white-space: pre-wrap;
            overflow-x: auto;
            position: relative;
            min-height: 40px;
            max-height: none;
            height: auto;
            border: 1px solid #f0f0f0;
        }
        
        /* 调整pre和code的样式，减少额外的margin和padding */
        .code-content pre {
            margin: 0;
            padding: 0;
            overflow: visible;
            white-space: pre-wrap;
            word-wrap: break-word;
            line-height: 1.4;
        }
        
        .code-content code {
            font-size: 12px;
            line-height: 1.4;
            white-space: pre-wrap;
            word-wrap: break-word;
        }
        
        /* 优化滚动条样式 */
        .code-content::-webkit-scrollbar {
            height: 6px;
        }
        
        .code-content::-webkit-scrollbar-track {
            background: #f1f1f1;
            border-radius: 3px;
        }
        
        .code-content::-webkit-scrollbar-thumb {
            background: #888;
            border-radius: 3px;
        }
        
        .code-content::-webkit-scrollbar-thumb:hover {
            background: #555;
        }
        
        /* 响应式设计 */
        @media (max-width: 1200px) {
            .code-grid {
                grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
                gap: 18px;
            }
        }
        
        @media (max-width: 900px) {
            .code-grid {
                grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
                gap: 16px;
            }
        }
        
        @media (max-width: 600px) {
            .code-grid {
                grid-template-columns: 1fr;
                gap: 14px;
            }
            
            .code-item {
                padding: 10px;
            }
        }
        
        /* 适配Highlight.js样式 */
        pre {
            margin: 0;
        }
        
        code {
            font-family: var(--monospace-font);
        }
        
        /* 提示信息 */
        .tip {
            background-color: #e8f4f8;
            color: #2980b9;
            padding: 10px 15px;
            border-radius: var(--border-radius);
            font-size: 13px;
            margin-top: 15px;
        }
        
        /* 结果显示 */
        .result {
            margin-top: 15px;
            padding: 15px;
            background-color: #e8f4f8;
            border-radius: var(--border-radius);
            border-left: 4px solid var(--primary-color);
        }
        
        .result h4 {
            font-size: 14px;
            color: #2c3e50;
            margin-bottom: 10px;
        }
        
        .result-content {
            font-family: var(--monospace-font);
            font-size: 14px;
            background-color: white;
            padding: 10px;
            border-radius: 3px;
            white-space: pre-wrap;
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <h1>时间转换工具</h1>
            <a href="index.html" class="back-btn">返回主页</a>
        </header>
        
        <div class="tool-section">
            <!-- 当前时间戳区域 -->
            <div class="current-timestamp">
                <h3>获取当前时间戳</h3>
                <div class="timestamp-display">
                    <div class="timestamp-item">
                        <div class="timestamp-label">秒级时间戳</div>
                        <div class="timestamp-value" id="currentSecondTimestamp" onclick="copyToClipboard(this)">--</div>
                    </div>
                    <div class="timestamp-item">
                        <div class="timestamp-label">毫秒级时间戳</div>
                        <div class="timestamp-value" id="currentMillisecondTimestamp" onclick="copyToClipboard(this)">--</div>
                    </div>
                    <div class="timestamp-item">
                        <div class="timestamp-label">当前日期时间</div>
                        <div class="timestamp-value" id="currentDateTime" onclick="copyToClipboard(this)">--</div>
                    </div>
                </div>
            </div>
            
            <!-- 转换区域 -->
            <div class="conversion-section">
                <!-- 输入区域 -->
                <div class="input-group">
                    <label for="inputTime">输入时间</label>
                    <input type="text" id="inputTime" placeholder="请输入时间戳（秒/毫秒）或日期时间">
                    <div class="tip">支持格式：1640995200（秒）、1640995200000（毫秒）、2022-01-01 00:00:00</div>
                </div>
                
                <!-- 转换按钮 -->
                <button class="convert-btn" onclick="convertTime()">转换</button>
                
                <!-- 输出区域 -->
                <div class="input-group">
                    <label for="outputResult">转换结果</label>
                    <textarea id="outputResult" placeholder="转换结果将显示在这里..." readonly></textarea>
                </div>
            </div>
            
            <!-- 操作按钮 -->
            <div class="action-buttons">
                <button class="action-btn" onclick="clearAll()">清空</button>
                <button class="action-btn" onclick="copyResult()">复制结果</button>
            </div>
        </div>
        
        <!-- 代码示例区域 -->
        <div class="code-examples">
            <h2>获取当前时间戳代码示例</h2>
            <div class="code-grid">
                <div class="code-item">
                    <div class="code-header">
                        <div class="code-language">JavaScript</div>
                        <button class="copy-btn" onclick="copyCode(this)">复制</button>
                    </div>
                    <div class="code-content">
                        <pre><code class="language-javascript">Math.round(new Date() / 1000)</code></pre>
                    </div>
                </div>
                
                <div class="code-item">
                    <div class="code-header">
                        <div class="code-language">Java</div>
                        <button class="copy-btn" onclick="copyCode(this)">复制</button>
                    </div>
                    <div class="code-content">
                        <pre><code class="language-java">// pure java
System.currentTimeMillis() / 1000
// java >= 8
Instant.now().getEpochSecond()</code></pre>
                    </div>
                </div>
                
                <div class="code-item">
                    <div class="code-header">
                        <div class="code-language">Python</div>
                        <button class="copy-btn" onclick="copyCode(this)">复制</button>
                    </div>
                    <div class="code-content">
                        <pre><code class="language-python">import time
time.time()</code></pre>
                    </div>
                </div>
                
                <div class="code-item">
                    <div class="code-header">
                        <div class="code-language">Go</div>
                        <button class="copy-btn" onclick="copyCode(this)">复制</button>
                    </div>
                    <div class="code-content">
                        <pre><code class="language-go">import (
  "time"
)
int64(time.Now().Unix())</code></pre>
                    </div>
                </div>
                
                <div class="code-item">
                    <div class="code-header">
                        <div class="code-language">PHP</div>
                        <button class="copy-btn" onclick="copyCode(this)">复制</button>
                    </div>
                    <div class="code-content">
                        <pre><code class="language-php">// pure php
time();
// carbon php
use Carbon\Carbon;
Carbon::now()->timestamp;</code></pre>
                    </div>
                </div>
                
                <div class="code-item">
                    <div class="code-header">
                        <div class="code-language">C</div>
                        <button class="copy-btn" onclick="copyCode(this)">复制</button>
                    </div>
                    <div class="code-content">
                        <pre><code class="language-c">#include <sys/time.h>

struct timeval tv;
gettimeofday(&tv, NULL);
// 秒： tv.tv_sec
// 毫秒： tv.tv_sec * 1000LL + tv.tv_usec / 1000</code></pre>
                    </div>
                </div>
                
                <div class="code-item">
                    <div class="code-header">
                        <div class="code-language">Swift</div>
                        <button class="copy-btn" onclick="copyCode(this)">复制</button>
                    </div>
                    <div class="code-content">
                        <pre><code class="language-swift">NSDate().timeIntervalSince1970</code></pre>
                    </div>
                </div>
                
                <div class="code-item">
                    <div class="code-header">
                        <div class="code-language">Ruby</div>
                        <button class="copy-btn" onclick="copyCode(this)">复制</button>
                    </div>
                    <div class="code-content">
                        <pre><code class="language-ruby">Time.now.to_i</code></pre>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <script>
        // 初始化页面
        document.addEventListener('DOMContentLoaded', function() {
            updateCurrentTimestamp();
            // 每秒钟更新一次当前时间戳
            setInterval(updateCurrentTimestamp, 1000);
            
            // 初始化代码高亮
            hljs.highlightAll();
        });
        
        // 复制代码功能
        function copyCode(button) {
            // 获取当前代码块
            const codeContent = button.closest('.code-item').querySelector('code');
            const codeText = codeContent.textContent;
            
            // 复制到剪贴板
            navigator.clipboard.writeText(codeText).then(() => {
                // 显示复制成功状态
                const originalText = button.textContent;
                button.textContent = '已复制';
                button.classList.add('copied');
                
                // 2秒后恢复原状
                setTimeout(() => {
                    button.textContent = originalText;
                    button.classList.remove('copied');
                }, 2000);
            }).catch(err => {
                console.error('复制失败:', err);
            });
        }
        
        // 更新当前时间戳
        function updateCurrentTimestamp() {
            const now = new Date();
            const secondTimestamp = Math.round(now.getTime() / 1000);
            const millisecondTimestamp = now.getTime();
            
            document.getElementById('currentSecondTimestamp').textContent = secondTimestamp;
            document.getElementById('currentMillisecondTimestamp').textContent = millisecondTimestamp;
            document.getElementById('currentDateTime').textContent = formatDate(now);
        }
        
        // 格式化日期
        function formatDate(date) {
            const year = date.getFullYear();
            const month = String(date.getMonth() + 1).padStart(2, '0');
            const day = String(date.getDate()).padStart(2, '0');
            const hours = String(date.getHours()).padStart(2, '0');
            const minutes = String(date.getMinutes()).padStart(2, '0');
            const seconds = String(date.getSeconds()).padStart(2, '0');
            const milliseconds = String(date.getMilliseconds()).padStart(3, '0');
            
            return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}.${milliseconds}`;
        }
        
        // 复制到剪贴板
        function copyToClipboard(element) {
            const text = element.textContent;
            navigator.clipboard.writeText(text).then(() => {
                showNotification('已复制到剪贴板');
            }).catch(err => {
                console.error('复制失败:', err);
            });
        }
        
        // 显示通知
        function showNotification(message) {
            // 创建通知元素
            const notification = document.createElement('div');
            notification.textContent = message;
            notification.style.cssText = `
                position: fixed;
                top: 20px;
                right: 20px;
                background-color: #2ecc71;
                color: white;
                padding: 10px 20px;
                border-radius: 5px;
                box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
                z-index: 1000;
                animation: slideIn 0.3s ease;
            `;
            
            // 添加动画
            const style = document.createElement('style');
            style.textContent = `
                @keyframes slideIn {
                    from {
                        transform: translateX(100%);
                        opacity: 0;
                    }
                    to {
                        transform: translateX(0);
                        opacity: 1;
                    }
                }
                @keyframes slideOut {
                    from {
                        transform: translateX(0);
                        opacity: 1;
                    }
                    to {
                        transform: translateX(100%);
                        opacity: 0;
                    }
                }
            `;
            document.head.appendChild(style);
            
            // 添加到页面
            document.body.appendChild(notification);
            
            // 2秒后移除
            setTimeout(() => {
                notification.style.animation = 'slideOut 0.3s ease';
                setTimeout(() => {
                    document.body.removeChild(notification);
                    document.head.removeChild(style);
                }, 300);
            }, 2000);
        }
        
        // 转换时间
        function convertTime() {
            const input = document.getElementById('inputTime').value.trim();
            if (!input) {
                showNotification('请输入要转换的时间');
                return;
            }
            
            let result = '';
            
            try {
                // 尝试解析为时间戳
                const numInput = Number(input);
                if (!isNaN(numInput)) {
                    // 是数字，按时间戳处理
                    let timestamp = numInput;
                    
                    // 判断是秒还是毫秒
                    if (input.length === 10) {
                        timestamp *= 1000; // 秒转毫秒
                    }
                    
                    const date = new Date(timestamp);
                    result = `转换结果：\n`;
                    result += `日期时间：${formatDate(date)}\n`;
                    result += `秒级时间戳：${Math.round(timestamp / 1000)}\n`;
                    result += `毫秒级时间戳：${timestamp}\n`;
                    result += `星期：${['日', '一', '二', '三', '四', '五', '六'][date.getDay()]}\n`;
                    result += `年份：${date.getFullYear()}\n`;
                    result += `月份：${date.getMonth() + 1}\n`;
                    result += `日期：${date.getDate()}`;
                } else {
                    // 不是数字，按日期时间处理
                    const date = new Date(input);
                    if (isNaN(date.getTime())) {
                        throw new Error('无效的日期格式');
                    }
                    
                    const timestampMs = date.getTime();
                    const timestampSec = Math.round(timestampMs / 1000);
                    
                    result = `转换结果：\n`;
                    result += `秒级时间戳：${timestampSec}\n`;
                    result += `毫秒级时间戳：${timestampMs}\n`;
                    result += `格式化日期：${formatDate(date)}\n`;
                    result += `星期：${['日', '一', '二', '三', '四', '五', '六'][date.getDay()]}`;
                }
                
                document.getElementById('outputResult').value = result;
            } catch (err) {
                showNotification('转换失败：' + err.message);
                document.getElementById('outputResult').value = '转换失败：' + err.message;
            }
        }
        
        // 清空所有
        function clearAll() {
            document.getElementById('inputTime').value = '';
            document.getElementById('outputResult').value = '';
        }
        
        // 复制结果
        function copyResult() {
            const output = document.getElementById('outputResult');
            if (!output.value) {
                showNotification('没有可复制的结果');
                return;
            }
            
            navigator.clipboard.writeText(output.value).then(() => {
                showNotification('结果已复制到剪贴板');
            }).catch(err => {
                console.error('复制失败:', err);
            });
        }
        
        // 回车键触发转换
        document.getElementById('inputTime').addEventListener('keypress', function(e) {
            if (e.key === 'Enter') {
                convertTime();
            }
        });
    </script>
</body>
</html>